Nested Navigators and Navigation Lifecycle in React Native

Course: React Native Training

Topic: Nested Navigators and Navigation Lifecycle

Course Link: React Native Training Course

Demo Link: Register for Course Demo

JustAcademy Website: Visit JustAcademy

1. Introduction

Navigation is an important part of React Native application development. Most mobile applications contain multiple screens, such as Home, Profile, Products, Product Details, Cart, Settings, Login, and Registration. As an application grows, managing all these screens with a single navigator can become difficult.

Nested Navigators allow one navigator to be rendered inside a screen managed by another navigator. Developers can combine Stack Navigation, Drawer Navigation, and Tab Navigation to create organized navigation flows.

Navigation Lifecycle describes how screens behave when users navigate between routes. It includes component mounting, screen focus, screen blur, navigation events, and unmounting.

Understanding these concepts helps developers manage navigation history, refresh data at the correct time, control screen-specific tasks, prevent unnecessary resource usage, and create a better user experience.

1.1 Learning Objectives

• Understand nested navigators and their advantages.
• Combine Stack, Drawer, and Tab navigators.
• Understand parent and child navigator relationships.
• Navigate to screens inside nested navigators.
• Pass route parameters to nested screens.
• Understand component mounting, focus, blur, and unmounting.
• Use navigation lifecycle hooks and event listeners.
• Refresh data when a screen becomes active.
• Clean up timers, subscriptions, and asynchronous tasks.
• Troubleshoot common navigation lifecycle problems.

2. Understanding React Navigation

React Navigation is a navigation library for React Native applications. It provides navigators that help developers control how screens are presented and how users move between them.

2.1 Why Use Multiple Navigators?

Different parts of an application may require different navigation behavior. A shopping application might use tabs for its main sections, a stack for product details, and a drawer for additional settings. Combining navigators allows each part to use the navigation pattern that fits its purpose.

2.2 What Is a Nested Navigator?

A nested navigator is a navigator rendered inside a screen of another navigator. The outer navigator is called the parent navigator, while the navigator inside its screen is called the child navigator.

NavigationContainer
    |
    └── Root Stack Navigator
          |
          ├── Main Tabs
          |     ├── Home Tab
          |     ├── Search Tab
          |     └── Profile Tab
          |
          └── Product Details Screen

In this structure, the root stack manages the overall navigation flow, while the tab navigator manages the main application sections.

3. Parent and Child Navigators

3.1 Parent Navigator

A parent navigator contains a screen that renders another navigator. It manages navigation at a higher level of the application.

For example, a Stack Navigator may contain a screen named Main, and that screen may render a Bottom Tab Navigator. In this case, the stack is the parent navigator.

3.2 Child Navigator

A child navigator is rendered inside a screen belonging to another navigator. It manages its own routes and navigation history.

3.3 Independent Navigation Histories

Each navigator maintains its own navigation state. When a user presses Back inside a nested stack, the child stack normally handles the action first. If it cannot handle the action, the action may bubble up to a parent navigator.

3.4 Important Rules

• Each navigator manages its own registered routes and navigation state.
• Each screen has its own route parameters.
• Screen options configured in a child navigator do not automatically configure the parent navigator's header.
• Navigation actions are handled by the current navigator first and may bubble up to a parent.
• Nested screens do not automatically receive all events emitted by parent navigators.
• The placement of headers, drawers, and tab bars depends on the navigator hierarchy.

4. Setting Up a React Native Project

The examples in these notes use React Navigation's dynamic component API, which is commonly used in React Native projects.

4.1 Create an Expo Project

npx create-expo-app NestedNavigationApp
cd NestedNavigationApp

4.2 Install React Navigation

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack
npm install @react-navigation/bottom-tabs

If your project also uses Drawer Navigation, install its package and compatible native dependencies.

npm install @react-navigation/drawer
npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets

Dependency requirements can change between versions. Follow the official React Navigation installation guide for your React Native or Expo version.

4.3 Start the Project

npx expo start

5. Creating a Stack Navigator

A Stack Navigator is often used as a root navigator because it can manage the main application flow and display detail screens above the primary interface.

5.1 Import and Create the Stack

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

5.2 Register Stack Screens

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>

Each screen has a route name and a React component. The stack navigator manages how screens are presented and how the Back action behaves.

6. Nesting a Tab Navigator Inside a Stack Navigator

A common pattern is to place a Bottom Tab Navigator inside the Home screen of a root Stack Navigator. This allows the tab bar to remain available on main sections while detail screens appear above the tab interface.

6.1 Create the Home Screen

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Home Screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

6.2 Create Other Tab Screens

import React from 'react';
import { View, Text } from 'react-native';

export function SearchScreen() {
  return (
    <View>
      <Text>Search Screen</Text>
    </View>
  );
}

export function ProfileScreen() {
  return (
    <View>
      <Text>Profile Screen</Text>
    </View>
  );
}

6.3 Create the Tab Navigator

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { HomeScreen, SearchScreen, ProfileScreen } from './Screens';

const Tab = createBottomTabNavigator();

function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="HomeTab"
        component={HomeScreen}
        options={{ title: 'Home' }}
      />
      <Tab.Screen
        name="SearchTab"
        component={SearchScreen}
        options={{ title: 'Search' }}
      />
      <Tab.Screen
        name="ProfileTab"
        component={ProfileScreen}
        options={{ title: 'Profile' }}
      />
    </Tab.Navigator>
  );
}

export default MainTabs;

Here, HomeTab, SearchTab, and ProfileTab are route names inside the tab navigator. Route names must match the names used in navigation calls.

6.4 Nest the Tabs Inside a Root Stack

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import MainTabs from './MainTabs';
import ProductDetailsScreen from './ProductDetailsScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          component={MainTabs}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="ProductDetails"
          component={ProductDetailsScreen}
          options={{ title: 'Product Details' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

The tab navigator is now nested inside the Main stack screen. Navigating to ProductDetails displays the detail screen above the main tab interface.

7. Navigating to Screens Inside Nested Navigators

When navigating to a route inside a nested navigator, specify the route hierarchy when necessary. This tells React Navigation which child navigator and screen should receive the action.

7.1 Navigate to a Nested Tab

navigation.navigate('Main', {
  screen: 'ProfileTab',
});

Here, Main is a route in the parent stack, and ProfileTab is a route in the nested tab navigator.

7.2 Pass Parameters to a Nested Screen

navigation.navigate('Main', {
  screen: 'ProfileTab',
  params: {
    userId: 25,
  },
});

The parameters are intended for the nested ProfileTab route. Parent route parameters and child route parameters are separate parts of navigation state.

7.3 Navigate Through Multiple Levels

navigation.navigate('Main', {
  screen: 'ProductsTab',
  params: {
    screen: 'ProductDetails',
    params: {
      productId: 101,
    },
  },
});

This example assumes that ProductsTab renders a navigator containing a route named ProductDetails. The names and hierarchy must match the actual application.

React Navigation reserves parameter names such as screen, params, initial, and state for nested navigation behavior. Avoid using these names for unrelated application data.

7.4 Navigate to the Initial Route of a Nested Navigator

When targeting a particular nested screen, that screen is generally used as the destination. If you need the nested navigator's configured initial route to remain the starting point, React Navigation supports the initial: false option in nested navigation parameters.

navigation.navigate('Main', {
  screen: 'ProfileTab',
  initial: false,
});

Use this option only when the resulting navigation history matches the behavior required by your application.

8. Combining Drawer, Tab, and Stack Navigators

A large application may combine all three navigator types. The drawer can organize broad sections, tabs can organize the main experience, and stacks can manage detailed navigation flows.

8.1 Example Navigation Structure

NavigationContainer
    |
    └── Drawer Navigator
          |
          ├── Main Section
          |     └── Tab Navigator
          |           ├── Home Tab
          |           ├── Search Tab
          |           └── Profile Tab
          |
          ├── Orders Stack
          |     ├── Orders List
          |     └── Order Details
          |
          └── Settings Screen

8.2 Example Use Cases

• Drawer: Home, Orders, Help, and Settings.
• Tabs: Home, Search, Saved Items, and Profile.
• Stack: Product List, Product Details, Cart, and Checkout.

Not every application needs all three navigator types. Choose the simplest hierarchy that meets the application's navigation requirements.

9. Understanding the Navigation Lifecycle

The navigation lifecycle describes what happens to a screen as users move between routes. It is important to distinguish the React component lifecycle from the navigation focus lifecycle.

9.1 Mounting

A screen mounts when React creates its component instance and inserts it into the rendered component tree. Its initial setup logic can run at this stage.

9.2 Focus

A screen is focused when it is the active route for its navigator. Focus may occur when a user navigates to the screen or returns to it from another route.

9.3 Blur

A screen blurs when it stops being the active route. A screen can blur without unmounting. For example, Home may remain mounted underneath Product Details in a stack.

9.4 Unmounting

A screen unmounts when its component is removed from the React component tree. React effect cleanup functions run when their dependencies change or when the component unmounts.

9.5 Lifecycle Comparison

Important: Navigating away from a screen does not necessarily unmount it. Stack and tab navigators can preserve screens so users can return without recreating the component. Exact behavior depends on the navigator and its configuration.

10. Understanding React useEffect and Navigation Focus

The React useEffect hook performs side effects in function components. It runs after rendering when its dependencies require it, and its cleanup function runs before the effect is re-executed or when the component unmounts.

10.1 Run an Effect When a Component Mounts

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';

export default function HomeScreen() {
  useEffect(() => {
    console.log('Home component mounted');

    return () => {
      console.log('Home component unmounted');
    };
  }, []);

  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

The empty dependency array means the effect is associated with the component's mount and unmount lifecycle, subject to React's development behavior and effect semantics. It does not mean the effect runs every time the user returns to the screen.

10.2 Why useEffect Alone May Not Be Enough

Suppose a user opens Home, navigates to Product Details, and then returns to Home. If Home remains mounted, its mount effect does not run again simply because the screen becomes visible. If the data must refresh each time Home becomes active, use a navigation focus-aware hook.

11. Using useFocusEffect

React Navigation provides useFocusEffect for running an effect while a screen is focused. The effect runs when the screen gains focus and its cleanup runs when the screen blurs, the dependencies change, or the component unmounts.

11.1 Basic Example

import React, { useCallback } from 'react';
import { View, Text } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

export default function ProfileScreen() {
  useFocusEffect(
    useCallback(() => {
      console.log('Profile screen focused');

      return () => {
        console.log('Profile screen focus effect cleaned up');
      };
    }, [])
  );

  return (
    <View>
      <Text>Profile Screen</Text>
    </View>
  );
}

11.2 Why Is useCallback Used?

useCallback memoizes a function until its dependencies change. Wrapping the callback passed to useFocusEffect prevents a new callback from being created on every render when the dependencies remain unchanged.

11.3 When to Use useFocusEffect

• Refresh data when the user returns to a screen.
• Subscribe to updates only while a screen is focused.
• Start screen-specific work when the screen becomes active.
• Clean up active work when the screen loses focus.
• Update information that may have changed while the screen was inactive.

11.4 useEffect vs useFocusEffect

12. Listening to Focus and Blur Events

React Navigation provides navigation events such as focus and blur. These events are useful when a task must respond to a screen becoming active or inactive.

12.1 Example Using addListener

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';

export default function DetailsScreen({ navigation }) {
  useEffect(() => {
    const unsubscribeFocus = navigation.addListener('focus', () => {
      console.log('Details screen focused');
    });

    const unsubscribeBlur = navigation.addListener('blur', () => {
      console.log('Details screen blurred');
    });

    return () => {
      unsubscribeFocus();
      unsubscribeBlur();
    };
  }, [navigation]);

  return (
    <View>
      <Text>Details Screen</Text>
    </View>
  );
}

12.2 Why Is Cleanup Important?

Each call to navigation.addListener returns an unsubscribe function. Calling it during cleanup prevents unnecessary listeners from remaining attached after the effect is cleaned up.

12.3 When to Use Navigation Events

Use event listeners when you need to respond to a specific navigation event. For a general effect that should run while a screen is focused, useFocusEffect is often simpler.

13. Refreshing Data When a Screen Gains Focus

Applications often need to refresh information when users return to a screen. An Orders screen may need to reload orders after a purchase, or a Profile screen may need to refresh account information after an edit.

13.1 Example with a Focus Effect

import React, { useCallback, useState } from 'react';
import { View, Text } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

export default function OrdersScreen() {
  const [message, setMessage] = useState('Waiting to load orders');

  useFocusEffect(
    useCallback(() => {
      let isActive = true;

      async function loadOrders() {
        try {
          setMessage('Loading orders...');

          // Replace this placeholder with your actual API request.
          const result = await Promise.resolve('Orders loaded successfully');

          if (isActive) {
            setMessage(result);
          }
        } catch (error) {
          if (isActive) {
            setMessage('Unable to load orders');
          }
        }
      }

      loadOrders();

      return () => {
        isActive = false;
      };
    }, [])
  );

  return (
    <View>
      <Text>Orders</Text>
      <Text>{message}</Text>
    </View>
  );
}

This example uses a placeholder asynchronous operation rather than a real API. Replace it with your application's data service. The active flag prevents this example from updating state after the focus effect has been cleaned up. For network requests, use cancellation such as AbortController when supported by the API and runtime.

13.2 Recommended Data Refresh Strategy

1. Determine whether the data needs refreshing when the screen gains focus.
2. Start the request when the screen becomes active.
3. Show an appropriate loading state.
4. Handle successful responses and failures.
5. Prevent outdated requests from overwriting newer data.
6. Cancel or ignore unfinished work when the effect is cleaned up.

14. Managing Timers and Subscriptions

Some screens start recurring timers, location updates, audio playback, or live data subscriptions. These activities may continue while a screen is not visible unless they are explicitly stopped or paused.

14.1 Start and Clear a Timer Based on Focus

import React, { useCallback, useState } from 'react';
import { View, Text } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

export default function TimerScreen() {
  const [seconds, setSeconds] = useState(0);

  useFocusEffect(
    useCallback(() => {
      const timerId = setInterval(() => {
        setSeconds(current => current + 1);
      }, 1000);

      return () => {
        clearInterval(timerId);
      };
    }, [])
  );

  return (
    <View>
      <Text>Focused time: {seconds} seconds</Text>
    </View>
  );
}

The timer is created while the screen is focused and cleared when the focus effect is cleaned up. The counter state remains as long as the component stays mounted.

14.2 Resources That May Need Cleanup

• Intervals created with setInterval.
• Timeouts created with setTimeout when no longer needed.
• Event listeners and subscriptions.
• Location or sensor subscriptions.
• WebSocket or live-update subscriptions.
• Audio or video activity that should stop when the screen becomes inactive.
• Asynchronous operations that support cancellation.

15. Lifecycle Behavior in Nested Navigators

Nested navigators introduce multiple navigation levels. A screen may remain mounted while its parent route is inactive, or it may gain and lose focus as users switch tabs or push and pop stack screens.

15.1 Example Lifecycle Flow

1. User opens the Home tab.
   Home mounts and receives focus.

2. User opens Product Details.
   Product Details mounts and receives focus.
   Home may remain mounted but loses focus.

3. User returns to Home.
   Product Details may unmount.
   Home receives focus again.
   Home's mount effect does not necessarily run again.

15.2 Tab Navigation Considerations

Tab navigators commonly preserve visited screens, depending on their configuration. Switching tabs therefore does not necessarily unmount the previous tab's screen. Use focus-aware logic when data or activity must respond to tab changes.

15.3 Stack Navigation Considerations

When a new screen is pushed onto a stack, the previous screen often remains mounted behind it. When the user goes back, the previous screen can regain focus without being recreated.

15.4 Parent and Child Lifecycle Are Different

A parent route and a nested screen have separate navigation contexts. Do not assume that a child screen receives every event emitted by its parent navigator. If a child needs to listen to a parent event, explicitly subscribe to the relevant parent navigator.

15.5 Pausing and Unmounting

Some navigator configurations support pausing or unmounting inactive screens. These behaviors are version- and navigator-dependent. Treat pausing as an optimization rather than a replacement for lifecycle cleanup. If a task must stop when a screen loses focus, use focus-aware cleanup or a relevant navigation event.

16. Using useIsFocused

The useIsFocused hook returns a Boolean value indicating whether the current screen is focused. It is useful when the user interface needs to change depending on the screen's active state.

16.1 Basic Example

import React from 'react';
import { View, Text } from 'react-native';
import { useIsFocused } from '@react-navigation/native';

export default function DashboardScreen() {
  const isFocused = useIsFocused();

  return (
    <View>
      <Text>Dashboard</Text>
      <Text>
        {isFocused ? 'Dashboard is active' : 'Dashboard is inactive'}
      </Text>
    </View>
  );
}

16.2 When to Use It

• Display whether a screen is active.
• Show or hide visual elements based on focus.
• Conditionally render lightweight UI elements.
• Control screen-specific visual behavior.

Important: useIsFocused causes a component to re-render when its focus state changes. Avoid using it to trigger expensive work unnecessarily. For subscriptions and side effects, prefer useFocusEffect or a suitable navigation event listener.

17. Listening to Parent Navigator Events

A nested screen does not automatically receive every event emitted by its parent navigator. For example, a screen inside a stack nested within a tab navigator may not receive the parent's tabPress event through its own navigation listener.

17.1 Assign an ID to the Parent Navigator

<Tab.Navigator id="MainTabs">
  <Tab.Screen name="HomeTab" component={HomeStack} />
  <Tab.Screen name="ProfileTab" component={ProfileStack} />
</Tab.Navigator>

17.2 Subscribe to a Parent Event

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';

export default function ProfileDetailsScreen({ navigation }) {
  useEffect(() => {
    const parentNavigation = navigation.getParent('MainTabs');

    if (!parentNavigation) {
      return;
    }

    const unsubscribe = parentNavigation.addListener('tabPress', () => {
      console.log('A parent tab was pressed');
    });

    return unsubscribe;
  }, [navigation]);

  return (
    <View>
      <Text>Profile Details</Text>
    </View>
  );
}

This example illustrates how to subscribe to a parent navigator event. The exact event behavior depends on the navigator, and the callback may run for multiple tab items. If the code needs to respond to a particular tab, inspect the event and navigation state or use a screen-specific approach.

17.3 Important Points

• Use the correct navigator ID when calling getParent().
• Check whether the parent navigator exists before subscribing.
• Always unsubscribe when the listener is no longer needed.
• Use an event supported by the parent navigator.

18. Handling the beforeRemove Event

The beforeRemove event is useful when a screen needs to respond before it is removed from navigation state. A common example is a form containing unsaved changes.

18.1 Example: Warn Before Leaving a Form

import React, { useEffect, useState } from 'react';
import { View, TextInput, Button, Alert } from 'react-native';

export default function EditProfileScreen({ navigation }) {
  const [name, setName] = useState('');
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);

  useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', event => {
      if (!hasUnsavedChanges) {
        return;
      }

      event.preventDefault();

      Alert.alert(
        'Discard changes?',
        'You have unsaved changes. Are you sure you want to leave?',
        [
          { text: 'Stay', style: 'cancel' },
          {
            text: 'Discard',
            style: 'destructive',
            onPress: () => {
              setHasUnsavedChanges(false);
              navigation.dispatch(event.data.action);
            },
          },
        ]
      );
    });

    return unsubscribe;
  }, [navigation, hasUnsavedChanges]);

  return (
    <View>
      <TextInput
        placeholder="Enter your name"
        value={name}
        onChangeText={value => {
          setName(value);
          setHasUnsavedChanges(true);
        }}
      />
      <Button
        title="Save"
        onPress={() => {
          // Save the form using your data service.
          setHasUnsavedChanges(false);
          navigation.goBack();
        }}
      />
    </View>
  );
}

This is an illustrative example. A production form should track whether its current values actually differ from the saved values, handle save failures, and avoid marking changes as saved before the save operation succeeds. Test this pattern with the navigation actions and navigator types supported by your application.

18.2 Common Uses of beforeRemove

• Prevent accidental loss of form changes.
• Confirm before leaving an editing workflow.
• Warn users before abandoning an unfinished process.
• Apply navigation rules before removing a route.

19. Screen Options in Nested Navigators

Each navigator has its own screen options. A child screen's title does not automatically change the title shown by a parent navigator. When combining navigators, decide which navigator should control the visible header.

19.1 Hide the Parent Header

<Stack.Screen
  name="Main"
  component={MainTabs}
  options={{ headerShown: false }}
/>

This approach is useful when the child navigator provides its own headers or when the main tab interface should not display a separate parent header.

19.2 Set the Header Title from the Active Nested Screen

In some applications, the parent stack header should display the title of the currently focused child screen. You can derive the title from the nested navigation state using getFocusedRouteNameFromRoute.

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

<Stack.Screen
  name="Main"
  component={MainTabs}
  options={({ route }) => {
    const routeName = getFocusedRouteNameFromRoute(route) ?? 'HomeTab';

    const titles = {
      HomeTab: 'Home',
      SearchTab: 'Search',
      ProfileTab: 'Profile',
    };

    return {
      title: titles[routeName] ?? 'Application',
    };
  }}
/>

Make sure the keys in the titles object match the actual child route names. For a more complex hierarchy, inspect the nested route state and handle missing route information safely.

20. Navigation Lifecycle and Performance

Nested navigation improves application organization, but excessive nesting and unnecessary background work can affect performance. Screens that remain mounted may retain local state and active effects even when they are not visible.

20.1 Avoid Unnecessary Data Requests

Do not fetch the same data on every render. Choose a clear strategy, such as initial loading, focus-based refresh, pull-to-refresh, or a shared data cache.

20.2 Avoid Expensive Work During Transitions

useFocusEffect can run as a screen gains focus, potentially while a navigation animation is in progress. If expensive work must wait until a transition completes, consider the relevant stack transition event or another appropriate scheduling strategy.

20.3 Clean Up Resources

Review subscriptions, timers, animations, and asynchronous operations. A hidden screen is not necessarily an unmounted screen, so do not rely solely on component unmounting to stop work.

20.4 Keep the Navigation Tree Manageable

• Avoid unnecessary layers of nested navigators.
• Avoid nesting identical navigator types without a clear user experience requirement.
• Use clear route names and consistent naming conventions.
• Keep screen components and navigator configuration organized into appropriate files.
• Use shared state or context when multiple screens need the same application data.
• Test Back behavior across nested navigation levels.

21. Common Errors and Troubleshooting

21.1 Debugging Checklist

1. Confirm that every screen is registered in the intended navigator.
2. Check route names and nested navigation parameters.
3. Verify that there is one intended root NavigationContainer for the navigation tree.
4. Check the order of parent and child navigators.
5. Log focus and blur events to understand screen transitions.
6. Verify that every event listener has a cleanup function.
7. Check whether a screen remains mounted or is being recreated.
8. Test Back behavior on the target platforms.

22. Practical Mini Project: Shopping App Navigation

22.1 Project Objective

Build a shopping application that combines nested navigators with lifecycle-aware data handling.

22.2 Navigation Structure

NavigationContainer
    |
    └── Root Stack
          |
          ├── Main Tabs
          |     ├── Home Stack
          |     |     ├── Home
          |     |     └── Product Details
          |     ├── Search Stack
          |     |     ├── Search
          |     |     └── Search Results
          |     └── Profile Stack
          |           ├── Profile
          |           └── Edit Profile
          |
          └── Checkout

22.3 Requirements

• Create a root stack navigator.
• Create a bottom tab navigator for Home, Search, and Profile.
• Create a stack navigator inside each tab where appropriate.
• Pass product IDs to the Product Details screen.
• Use useFocusEffect to refresh profile or order data when appropriate.
• Use focus-aware cleanup for timers and subscriptions.
• Warn users before leaving an edit form with unsaved changes.
• Configure headers to avoid duplicates.
• Test navigation history and Back behavior.

22.4 Expected Result

The user can switch between major tabs, open detail screens inside a tab, edit profile information, and navigate to Checkout from the root stack. Returning to a screen should preserve its state when appropriate and refresh data only when required.

23. Practical Exercises

Exercise 1: Create Nested Navigators

• Create a Stack Navigator and a Bottom Tab Navigator.
• Register the tab navigator as a screen in the stack.
• Add Home, Search, and Profile tabs.
• Add a Product Details screen to the root stack.
• Test the navigation flow and Back behavior.

Exercise 2: Implement Focus-Based Refresh

• Create a Profile screen that displays user information.
• Use useFocusEffect to refresh the information when the screen becomes active.
• Display loading, success, and error states.
• Prevent outdated requests from updating the screen.

Exercise 3: Manage Screen Subscriptions

• Create a screen with a timer or subscription.
• Start the task when the screen gains focus.
• Stop the task when the focus effect is cleaned up.
• Navigate away and return to verify the behavior.

Exercise 4: Handle Unsaved Changes

• Create an Edit Profile form.
• Track changes to the form values.
• Warn the user before leaving with unsaved changes.
• Allow the user to save, discard, or continue editing.

24. Interview Questions and Answers

Q1. What is a nested navigator?

Answer: A nested navigator is a navigator rendered inside a screen managed by another navigator. It allows multiple navigation patterns to work together.

Q2. What is the difference between a parent and a child navigator?

Answer: The parent navigator manages the outer route containing the child navigator. The child navigator manages its own screens and navigation history.

Q3. Can Stack, Drawer, and Tab navigators be combined?

Answer: Yes. They can be nested to create a navigation structure suited to the application's requirements.

Q4. What is the navigation lifecycle?

Answer: It describes how screens mount, gain focus, lose focus, receive navigation events, and unmount as users move through the application.

Q5. What is the difference between mounting and focusing?

Answer: Mounting occurs when React creates a component instance. Focusing occurs when a screen becomes the active route. A screen can remain mounted while it is not focused.

Q6. Does a screen always unmount when the user navigates away?

Answer: No. React Navigation often keeps previous stack screens mounted so their state can be preserved when users return.

Q7. What is useFocusEffect?

Answer: It is a React Navigation hook that runs an effect while a screen is focused and cleans it up when focus is lost, dependencies change, or the screen unmounts.

Q8. Why use useCallback with useFocusEffect?

Answer: It keeps the callback stable while its dependencies remain unchanged, helping prevent the focus effect from being cleaned up and rerun on every render.

Q9. What is useIsFocused?

Answer: It is a hook that returns a Boolean indicating whether the current screen is focused. It is useful when the rendered UI depends on focus state.

Q10. What are focus and blur events?

Answer: The focus event indicates that a screen becomes active, while blur indicates that it stops being active. Some transitions may unmount a screen without delivering a blur event first.

Q11. How can you refresh data whenever a screen becomes active?

Answer: Use useFocusEffect to start the refresh operation and clean up or cancel it when the effect is no longer active.

Q12. How can nested route parameters be passed?

Answer: Navigate to the parent route and provide the child route through the screen property, with the child's data in its params property.

Q13. Do child screens automatically receive parent navigation events?

Answer: No. A child screen may need to use navigation.getParent() to subscribe to a parent navigator's event.

Q14. Why might a screen's header title fail to update?

Answer: Each navigator has its own screen options. The title may have been configured in the child navigator when the visible header belongs to the parent, or vice versa.

Q15. How can timers be stopped when a screen loses focus?

Answer: Create the timer in a focus-aware effect and return a cleanup function that clears it.

Q16. What is the purpose of beforeRemove?

Answer: It allows a screen to respond before it is removed from navigation state, such as warning users about unsaved form changes.

Q17. Why is cleanup important in navigation?

Answer: Cleanup prevents unnecessary subscriptions, timers, and asynchronous operations from continuing after they are no longer needed.

Q18. What can cause unexpected Back behavior in nested navigators?

Answer: Each navigator has its own history, so the current child navigator may handle Back before the parent. The navigator hierarchy and initial routes should be reviewed.

Q19. What is the difference between useEffect and useFocusEffect?

Answer: useEffect follows the React component lifecycle and dependency changes. useFocusEffect also considers the navigation focus lifecycle.

Q20. What is a best practice for nested navigation?

Answer: Keep the hierarchy as simple as possible, use meaningful route names, configure headers deliberately, and handle focus-aware effects and cleanup correctly.

25. Quick Revision Checklist

• Understand Stack, Drawer, and Tab navigators.
• Know how parent and child navigators are related.
• Register nested navigators as screen components.
• Understand independent navigation histories.
• Navigate to nested routes using the parent route and child screen.
• Pass parameters to the correct nested screen.
• Understand mount, focus, blur, and unmount.
• Know when to use useEffect and useFocusEffect.
• Use useIsFocused when UI rendering depends on focus.
• Unsubscribe from navigation event listeners.
• Stop timers and subscriptions when they are no longer needed.
• Protect forms with unsaved changes when appropriate.
• Configure parent and child headers correctly.
• Test Back behavior and lifecycle transitions.

26. Official Documentation and Course Resources

• React Native Training Course at JustAcademy
• Register for a Course Demo
• JustAcademy Official Website
• React Navigation: Nesting Navigators
• React Navigation: Navigation Lifecycle
• React Navigation: useFocusEffect
• React Navigation: Navigation Events

27. Conclusion

Nested Navigators and Navigation Lifecycle are important concepts for building maintainable React Native applications. Nested navigators allow developers to combine stack, drawer, and tab navigation into a clear hierarchy. Lifecycle concepts explain why a screen can remain mounted while inactive and how focus-aware logic can be used to refresh data or manage active tasks.

For reliable applications, use the simplest navigation hierarchy that meets the user experience requirements, pass parameters to the correct route, configure headers intentionally, and clean up timers, subscriptions, and asynchronous work. Practice these techniques by building an application with nested stacks and tabs, then test its navigation and lifecycle behavior on your target devices.

Explore React Native Training: View Course Details | Register for a Demo | Visit JustAcademy